<template>
<xdh-panel class="activity-track-block" theme="primary" title="活动轨迹" shadow size="small">
  <div class="ctrl-wrap">
    <el-radio-group v-model="filterType" size="mini">
      <el-radio-button v-for="item in filterOpts" :key="item.value" 
         :label="item.value"
      >{{item.label}}（{{item.number}}）</el-radio-button>
    </el-radio-group>

    <div class="right">
      <el-form :inline="true" style="height: 40px">
        <el-form-item label="时间" style="margin: 0 10px 0 0">
          <el-select size="mini" v-model="timeArea">
            <el-option label="近一年" value="year"></el-option>
            <el-option label="近半年" value="halfYear"></el-option>
            <el-option label="近一月" value="month"></el-option> 
            <el-option label="近一周" value="week"></el-option>
            <el-option label="当天" value="today"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini">地图轨迹</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
  <div class="companion-wrap">
    <div style="width: 20px; line-height:1.6">同行分析</div>
    <div class="person" v-for="i in 12" :key="i">
      <!-- <img class="img" src="../../assets/img/logo.png" alt=""> -->
      <xdh-async-img class="img" :id="`aaaa${i}`"></xdh-async-img>
      <div class="label">15次</div>
    </div>
  </div>
  <div class="time-line-wrap" >
    <xdh-timeline class="time-line" :data="showTimeData" body-color="white" fold :props="{children:'list'}" sign-align="middle">
      <template slot="opposite" slot-scope="slotProps">
        <h1 style="font-size: 3em;margin: 0;">
          {{slotProps.item.stamp}}
        </h1>
      </template>
      <template slot-scope="slotProps" >
        <time-line-card 
        v-if="slotProps.item.point" :card="slotProps.item">
        </time-line-card>
        <div v-else style="padding: 15px"></div>
      </template>
    </xdh-timeline>
  </div>    
</xdh-panel> 
</template>

<style lang="scss" scoped>
@import '../../style/_vars.scss';
.activity-track-block{
  background: $--background-color-base;
  .ctrl-wrap{
    display: flex;
    align-items: center;
    .right{
      flex: 1;
      text-align: right;
      justify-content: flex-end;
    }
  }
  .companion-wrap{
    display: flex;
    align-items: center;
    width: 70%;
    margin: 10px auto;
    padding: 5px 10px;
    border: 1px solid gray;
    overflow: hidden;
    background: white;
    .person{
      flex: 0 0 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 80px;
      height: 80px;
      margin: 0 10px;
      background: $--background-color-base;
      .img{
        width: 100%;
        height: 100%;
      }
      .label{
        position: absolute;
        right: 0;
        bottom: 0;
        display: inline-block;
        line-height: 1.6;
        padding: 0 5px;
        border-radius: 10px;
        color: white;
        background: $--color-danger;
      }
    }
  }
}
.time-line-wrap{
  // padding-left: 150px;
  .time-line {
    margin-left: -65%;
    
    &-title {
      text-align: center;
      font-size: 36px; 
      line-height: 1.3;
      background: rgba(0,0,0,0.03); 
      color: #435fdd;   
    }
    &-time {
      flex: 1 1 150px;
      max-width: 105px;
      background: red;
    }
  }  
}

</style>

<script>
import XdhTimeline from '@/widgets/xdh-timeline'
import XdhPanel from '@/widgets/xdh-panel'
import XdhAsyncImg from '@/components/common/xdh-async-img/index'
import TimeLineCard from './time-line-card'
const TYPE = {
  all: '全部',
  station: '乘车',
  airport: '进出港',
  hotel: '旅行',
  netcafe: '网吧'
}
export default {
  name: 'activityTrack',
  components: {
    XdhPanel,
    XdhTimeline,
    XdhAsyncImg,
    TimeLineCard
  },
  props: {
    
    
  },
  data() {
    return {
      timeArea: 'year',
      filterType: 'all',
      timeLineData: [
        {
          align: 'right',
          stamp: '2018',
          bodyColor: 'transparent',
          list: [
            {
              align: 'right',
              point: '08/15',
              size: 'small',
              content: {
                type: 'station',
                from: '南宁',
                to: '珠海',
                number: 'G2043B',
                info: {
                  'fromTime': {label: '出发时间', value: '12:00'},
                  'toTime': {label: '到达时间', value: '14:00'},
                  'seat': {label: '车厢座位', value: '003'}
                }
              }
            },
            {
              align: 'right',
              point: '08/13',
              size: 'small',
              content: {
                type: 'airport', // 类型
                from: '广州', // 出发
                to: '西安', // 到达
                number: 'G2043B', // 航班号
                info: {
                  'fromTime': {label: '出发时间', value: '12:00'},
                  'toTime': {label: '到达时间', value: '14:00'},
                  'seat': {label: '座位号码', value: '003'}
                }
              }
            },
            {
              align: 'right',
              point: '08/13',
              size: 'small',
              content: {
                type: 'hotel',
                locName: '汉庭酒店',
                address: '重庆市江北区观音桥建新东路110号',
                addLoc: [300, 400],
                info: {
                  'fromTime': {label: '入住时间', value: '12:00'},
                  'toTime': {label: '离开时间', value: '14:00'},
                  'seat': {label: '房间号', value: '003'}
                }
              }
            },
            {
              align: 'right',
              point: '08/13',
              size: 'small',
              content: {
                type: 'netcafe', // 类型
                locName: '星星网吧', // 地名
                address: '重庆市江北区观音桥建新东路110号', // 地址
                addLoc: [300, 400], // 坐标
                info: {
                  'fromTime': {label: '开机时间', value: '12:00'},
                  'toTime': {label: '下线时间', value: '14:00'},
                  'seat': {label: '座位号', value: '003'}
                }
              }
            }
          ]
        },
        {
          align: 'right',
          stamp: '2017',
          bodyColor: 'transparent',
          list: [
            {
              align: 'right',
              point: '08/15',
              size: 'small',
              content: {
                type: 'station',
                from: '南宁',
                to: '珠海',
                number: 'G2043B',
                info: {
                  'fromTime': {label: '出发时间', value: '12:00'},
                  'toTime': {label: '到达时间', value: '14:00'},
                  'seat': {label: '车厢座位', value: '003'}
                }
              }
            },
            {
              align: 'right',
              point: '08/13',
              size: 'small',
              content: {
                type: 'airport', // 类型
                from: '广州', // 出发
                to: '西安', // 到达
                number: 'G2043B', // 航班号
                info: {
                  'fromTime': {label: '出发时间', value: '12:00'},
                  'toTime': {label: '到达时间', value: '14:00'},
                  'seat': {label: '座位号码', value: '003'}
                }
              }
            },
            {
              align: 'right',
              point: '08/13',
              size: 'small',
              content: {
                type: 'hotel',
                locName: '汉庭酒店',
                address: '重庆市江北区观音桥建新东路110号',
                addLoc: [300, 400],
                info: {
                  'fromTime': {label: '入住时间', value: '12:00'},
                  'toTime': {label: '离开时间', value: '14:00'},
                  'seat': {label: '房间号', value: '003'}
                }
              }
            },
            {
              align: 'right',
              point: '08/13',
              size: 'small',
              content: {
                type: 'netcafe', // 类型
                locName: '星星网吧', // 地名
                address: '重庆市江北区观音桥建新东路110号', // 地址
                addLoc: [300, 400], // 坐标
                info: {
                  'fromTime': {label: '开机时间', value: '12:00'},
                  'toTime': {label: '下线时间', value: '14:00'},
                  'seat': {label: '座位号', value: '003'}
                }
              }
            }
          ]
        },
        {
          align: 'right',
          stamp: '2016',
          bodyColor: 'transparent',
          list: [
            {
              align: 'right',
              point: '08/15',
              size: 'small',
              content: {
                type: 'station',
                from: '南宁',
                to: '珠海',
                number: 'G2043B',
                info: {
                  'fromTime': {label: '出发时间', value: '12:00'},
                  'toTime': {label: '到达时间', value: '14:00'},
                  'seat': {label: '车厢座位', value: '003'}
                }
              }
            },
            {
              align: 'right',
              point: '08/13',
              size: 'small',
              content: {
                type: 'airport', // 类型
                from: '广州', // 出发
                to: '西安', // 到达
                number: 'G2043B', // 航班号
                info: {
                  'fromTime': {label: '出发时间', value: '12:00'},
                  'toTime': {label: '到达时间', value: '14:00'},
                  'seat': {label: '座位号码', value: '003'}
                }
              }
            },
            {
              align: 'right',
              point: '08/13',
              size: 'small',
              content: {
                type: 'hotel',
                locName: '汉庭酒店',
                address: '重庆市江北区观音桥建新东路110号',
                addLoc: [300, 400],
                info: {
                  'fromTime': {label: '入住时间', value: '12:00'},
                  'toTime': {label: '离开时间', value: '14:00'},
                  'seat': {label: '房间号', value: '003'}
                }
              }
            },
            {
              align: 'right',
              point: '08/13',
              size: 'small',
              content: {
                type: 'netcafe', // 类型
                locName: '星星网吧', // 地名
                address: '重庆市江北区观音桥建新东路110号', // 地址
                addLoc: [300, 400], // 坐标
                info: {
                  'fromTime': {label: '开机时间', value: '12:00'},
                  'toTime': {label: '下线时间', value: '14:00'},
                  'seat': {label: '座位号', value: '003'}
                }
              }
            }
          ]
        }
      ]
    }
  },
  computed: {
    filterOpts() {
      if (!this.timeLineData.length) {
        return Object.entries(TYPE).map((item, index) => {
          return {
            value: item[0],
            label: item[1],
            number: 0
          }
        })
      } else {
        let allNodes = []
        this.timeLineData.forEach((item, index) => {
          if (item.list.length) {
            allNodes = allNodes.concat(item.list)
          }
        })
        return Object.entries(TYPE).map((item, index) => {
          let val = item[0]
          return {
            value: val,
            label: item[1],
            number: val === 'all' ? allNodes.length : allNodes.filter((node, i) => {
              return node.content.type === val
            }).length
          }
        })
      }
    },
    showTimeData() {
      let _timeData = JSON.parse(JSON.stringify(this.timeLineData))
      if (this.filterType === 'all') {
        return _timeData.map((item, index) => {
          item.fold = false
          return item
        })
      } else {
        
        return _timeData.map((item, index) => {
          item.fold = false
          item.list = item.list.filter((node, i) => {
            return node.content.type === this.filterType
          })
          return item
        })
      }
    }
  },
  watch: {
    showTimeData(val) {
      console.log('showTimeData', val)
      console.log('timeLineData', this.timeLineData)
    }
  },
  methods: {
  },
  mounted() {
     
  }
}
</script>

